<template>
    <div class="quick-overview">
      <h2>系统状态</h2>
      <ul>
        <li>运行时间: {{ runtime }}</li>
        <li>内存使用: {{ memoryUsage }} MB</li>
        <li>连接数: {{ connections }}</li>
      </ul>
      <h2>性能指标</h2>
      <ul>
        <li>QPS: {{ qps }}</li>
        <li>平均响应时间: {{ averageResponseTime }} ms</li>
      </ul>
      <h2>重要通知</h2>
      <ul>
        <li v-for="notice in notices" :key="notice.id">{{ notice.text }}</li>
      </ul>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  const runtime = ref('123456789 seconds');
  const memoryUsage = ref(123.45);
  const connections = ref(100);
  const qps = ref(500);
  const averageResponseTime = ref(10.25);
  const notices = ref([
    { id: 1, text: '系统将于今晚进行维护，请提前做好准备。' },
    { id: 2, text: '最新版本已发布，请及时更新。' },
  ]);
  </script>
  
  <style scoped>
  .quick-overview {
    padding: 20px;
  }
  </style>